<script setup lang="ts">
import {
  ElRow,
  ElCol,
  ElInput,
  ElButton,
  ElMessage,
  ElCard,
} from "element-plus";
import { ElRadioGroup, ElRadio, ElRadioButton, ElTooltip } from "element-plus";
import { ref, onMounted, onUnmounted, watch } from "vue";
import "codemirror/mode/javascript/javascript.js";
import type { CmComponentRef } from "codemirror-editor-vue3";
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
const scriptUrl = defineModel("scriptUrl");
const demoFileUrl = defineModel("demoFileUrl");
const demoConfigType = defineModel("demoConfigType");
const demoConfigMode = defineModel("demoConfigMode");
interface Props {
  scriptUrl?: string;
}

defineOptions({
  name: "ReviewReport",
});

const props = withDefaults(defineProps<Props>(), {});

const getUuid = function () {
  return "xxxxxxxxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

const VITE_ONLY_OFFICE_BASE_URL = import.meta.env.VITE_ONLY_OFFICE_BASE_URL;
const url = ref("http://47.94.91.67/demo_file/demo.docx");
const containerRef = ref();
const cmRef = ref<CmComponentRef>();

let containerWidth = 0;
let containerHeight = 0;
let documentEditorKey = ref("");
onMounted(() => {
  containerWidth = containerRef.value.parentNode.offsetWidth;
  containerHeight = containerRef.value.parentNode.offsetHeight;
  if (containerHeight > 800) {
    // containerHeight = 800;
  }
  // containerRef.value.style.height = containerHeight + "px";
  containerRef.value.style.height = "calc(100vh - 88px)";
  setTimeout(() => {
    cmRef.value?.resize("100%", containerHeight);
  }, 1000);
  documentEditorKey.value = getUuid();
});

onUnmounted(() => {});

let currentConnector = null;
const onDocumentReady = () => {
  console.log("onDocumentReady");
  currentConnector = DocEditor.instances.docEditor.createConnector();
  window.connector = currentConnector;
  currentConnector.callCommand(
    function () {
      Api.openParagraphChange();
    },
    function () {
      currentConnector.attachEvent("onParagraphChange", function (data) {
        initReviewReport();
      });
    }
  );
  
  initReviewReport();
};

var config = ref({
  type: "desktop",
  // "type": "mobile",
  documentType: "word",
  historyList: {
    history: [],
    currentVersion: "1",
  },
  document: {
    title: "通用模板.docx",
    // url: "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
    url: "",
    permissions: {
      print: true,
      download: true,
      edit: true,
    },
    fileType: "docx",
    key: getUuid(),
  },
  editorConfig: {
    customization: {
      autosave: false,
      compactToolbar: true,
      forcesave: true,
      toolbarNoTabs: true,
      help: false,
      compactHeader: false,
      hideRightMenu: true,
      plugins: true,
      uiTheme: "theme-light",
      review: {
        trackChanges: true,
      },
    },
    mode: "edit",
    callbackUrl:
      "https://api.docs.onlyoffice.com/dummyCallback",
    lang: "zh-CN",
    user: {
      name: "曹瑞剑雄",
      id: "104",
    },
  },
});

const init = function () {
  config.value.document.key = getUuid();
  config.value.document.url = demoFileUrl.value;
  config.value.document.type = demoConfigType.value;
  config.value.editorConfig.mode = demoConfigMode.value;
  documentEditorKey.value = config.value.document.key;
};

const reviewReport = ref({});
const typeNameToZh = ref({
  TextAdd: "新增文字",
  TextRem: "删除文字",
  ParaAdd: "新增段落",
  ParaRem: "删除段落",
  TextPr: "修改文字样式",
  ParaPr: "修改段落样式",
  Unknown: "未知",
});

init();

let initReviewReport = function () {
  currentConnector.callCommand(
    function () {
      var oDocument = Api.GetDocument();
      let reviewReport = oDocument.GetReviewReport();
      for (var nickName in reviewReport) {
        for (var i = 0; i < reviewReport[nickName].length; i++) {
          var item = reviewReport[nickName][i];
          item["ClassType"] = item.ReviewedElement.GetClassType();
          item["Id"] = item.ReviewedElement.GetId();
          delete item["ReviewedElement"];
        }
      }
      return reviewReport;
    },
    function (reviewReportData) {
      reviewReport.value = reviewReportData;
    }
  );
};
window.initReviewReport = initReviewReport;

let scrollToParagraph = function(id, date){
    Asc.scope = {
        Id: id,
        Date: date
    };
    currentConnector.callCommand(function() {
        var oDocument = Api.GetDocument();
        oDocument.SelectRevisionChange2(Asc.scope.Id, Asc.scope.Date);
    }, function() {});
}
</script>

<template>
  <di class="onlyoffice_demo_container" ref="containerRef">
    <el-row>
      <el-col :span="9">
        <div
          style="
            width: 100%;
            height: calc(100vh - 88px);
            overflow: scroll;
            background: #ffffff;
          "
        >
          <el-card
            shadow="always"
            v-for="(item, nickName) in reviewReport"
            :key="nickName"
          >
            <template #header>
              <div class="card-header">
                <span>用户： {{ nickName }} 的操作</span>
              </div>
            </template>
            <div class="mb-2 ml-4" v-for="reviewItem in item">
              <div class="mb-2 ml-4" v-if="typeNameToZh[reviewItem.Type] != undefined">
                <span>{{ typeNameToZh[reviewItem.Type] }}：</span>
                <span v-if="reviewItem.Value != undefined">
                    {{ reviewItem.Value }}
                </span>
                <el-button type="primary" @click="scrollToParagraph(reviewItem.Id, reviewItem.Date)">跳转</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="15">
        <DocumentEditor
          v-if="demoFileUrl && config.document.url"
          id="docEditor"
          :documentServerUrl="VITE_ONLY_OFFICE_BASE_URL"
          :config="config"
          :events_onDocumentReady="onDocumentReady"
          height="100%"
        />
      </el-col>
    </el-row>
  </di>
</template>

<style scoped>
.onlyoffice_demo_container {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>
